<template>
  <view class="container">
    <view class="comment-list">
      <!-- 无数据提示 -->
      <view class="empty" v-if="commentList.length === 0">
        <image src="/static/img/empty.png" mode="aspectFit"></image>
        <text>暂无评价记录</text>
      </view>
      
      <!-- 评价列表 -->
      <view class="comment-item" v-for="(item, index) in commentList" :key="index">
        <view class="product-info" @click="navToProduct(item.productId)">
          <image :src="getProductImage(item)" class="product-img"></image>
          <view class="info">
            <text class="name">{{item.productName}}</text>
            <text class="attr">{{item.productAttribute}}</text>
            <text class="price" v-if="item.product && item.product.price">￥{{item.product.price}}</text>
          </view>
          <view class="time-tag">
            <text class="time">{{item.createTime | formatTime}}</text>
          </view>
        </view>
        
        <view class="comment-content">
          <view class="rating-box">
            <view class="rating">
              <text class="yticon icon-shitinghuiyuan" 
                v-for="star in 5" 
                :key="star" 
                :class="{'active': star <= item.star}">
              </text>
            </view>
            <view class="anonymous-tag" v-if="item.memberNickName === '匿名用户'">
              <text>匿名</text>
            </view>
          </view>
          
          <text class="content">{{item.content || '用户未填写评价内容'}}</text>
          
          <view class="pics" v-if="item.pics">
            <image 
              v-for="(pic, picIndex) in formatPics(item.pics)" 
              :key="picIndex" 
              :src="pic" 
              class="pic" 
              mode="aspectFill"
              @click="previewImage(formatPics(item.pics), picIndex)">
            </image>
          </view>
          
          <!-- 商家回复 -->
          <view class="reply" v-if="item.replayCount > 0 && item.replyContent">
            <text class="label">商家回复：</text>
            <text class="reply-content">{{item.replyContent}}</text>
            <text class="reply-time" v-if="item.replyTime">{{item.replyTime | formatTime}}</text>
          </view>
          
          <view class="actions">
            <view class="action-btn" @click="navToProduct(item.productId)">
              <text class="yticon icon-shouye"></text>
              <text>查看商品</text>
            </view>
            <view class="action-btn" @click="deleteComment(item.id)">
              <text class="yticon icon-shanchu"></text>
              <text>删除评价</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <uni-load-more :status="loadingType"></uni-load-more>
  </view>
</template>

<script>
  import { listMyComments, deleteComments } from '@/api/comment.js';
  import { formatDate } from '@/utils/date';
  import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  
  export default {
    components: {
      uniLoadMore
    },
    data() {
      return {
        commentList: [],
        pageNum: 1,
        pageSize: 10,
        loadingType: 'more',
        totalPage: 1,
        isLoading: false
      }
    },
    onLoad() {
      this.loadData('refresh');
    },
    onPullDownRefresh() {
      this.pageNum = 1;
      this.loadData('refresh');
    },
    onReachBottom() {
      if (this.pageNum >= this.totalPage || this.loadingType === 'noMore') {
        return;
      }
      this.pageNum++;
      this.loadData('more');
    },
    filters: {
      formatTime(time) {
        if (!time) return '';
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
    methods: {
      // 获取商品图片
      getProductImage(item) {
        if (item.product && item.product.pic) {
          return item.product.pic;
        }
        return '/static/img/default-product.png';
      },
      
      // 加载评价数据
      loadData(type) {
        if (this.isLoading) return;
        this.isLoading = true;
        
        if (type === 'refresh') {
          this.pageNum = 1;
          this.loadingType = 'loading';
        }
        
        uni.showLoading({
          title: '加载中...'
        });
        
        listMyComments(this.pageSize, this.pageNum).then(response => {
          uni.hideLoading();
          this.isLoading = false;
          
          if (type === 'refresh') {
            uni.stopPullDownRefresh();
            this.commentList = [];
          }
          
          if (response.code === 200 && response.data) {
            const data = response.data;
            
            if (type === 'refresh') {
              this.commentList = data.list || [];
            } else {
              this.commentList = this.commentList.concat(data.list || []);
            }
            
            this.totalPage = data.totalPage || 1;
            
            // 设置加载状态
            if (this.pageNum >= this.totalPage || (data.list && data.list.length < this.pageSize)) {
              this.loadingType = 'noMore';
            } else {
              this.loadingType = 'more';
            }
          } else {
            this.loadingType = 'more';
            uni.showToast({
              title: response.message || '获取评价失败',
              icon: 'none'
            });
          }
        }).catch((error) => {
          console.error('获取我的评价失败:', error);
          this.isLoading = false;
          uni.hideLoading();
          if (type === 'refresh') {
            uni.stopPullDownRefresh();
          }
          this.loadingType = 'more';
          uni.showToast({
            title: '获取评价失败，请检查网络',
            icon: 'none'
          });
        });
      },
      
      // 处理图片地址
      formatPics(pics) {
        if (!pics) return [];
        if (typeof pics === 'string') {
          return pics.split(',').filter(pic => pic && pic.trim() !== '');
        }
        return Array.isArray(pics) ? pics : [];
      },
      
      // 导航到商品详情
      navToProduct(productId) {
        if (!productId) return;
        uni.navigateTo({
          url: `/pages/product/product?id=${productId}`
        });
      },
      
      // 预览图片
      previewImage(pics, current) {
        if (!pics || !pics.length) return;
        uni.previewImage({
          urls: pics,
          current: pics[current]
        });
      },
      
      // 删除评价
      deleteComment(id) {
        if (!id) return;
        
        uni.showModal({
          title: '提示',
          content: '确定要删除这条评价吗？',
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '删除中...'
              });
              
              deleteComments([id]).then(response => {
                uni.hideLoading();
                if (response.code === 200) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                  });
                  
                  // 从列表中移除
                  this.commentList = this.commentList.filter(item => item.id !== id);
                  
                  // 如果删除后列表为空且不是第一页，返回上一页
                  if (this.commentList.length === 0 && this.pageNum > 1) {
                    this.pageNum--;
                    this.loadData('refresh');
                  } else if (this.commentList.length === 0) {
                    // 如果是第一页且为空，显示空状态
                    this.loadingType = 'more';
                  }
                } else {
                  uni.showToast({
                    title: response.message || '删除失败',
                    icon: 'none'
                  });
                }
              }).catch((error) => {
                console.error('删除评价失败:', error);
                uni.hideLoading();
                uni.showToast({
                  title: '删除失败，请稍后重试',
                  icon: 'none'
                });
              });
            }
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 20rpx;
    background-color: #f8f8f8;
    min-height: 100vh;
  }
  
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    
    image {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 30rpx;
    }
    
    text {
      font-size: 28rpx;
      color: $font-color-light;
    }
  }
  
  .comment-item {
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
    
    .product-info {
      display: flex;
      padding: 24rpx;
      border-bottom: 1rpx solid #f5f5f5;
      position: relative;
      
      .product-img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 8rpx;
        flex-shrink: 0;
        background-color: #f5f5f5;
      }
      
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 20rpx;
        overflow: hidden;
        
        .name {
          font-size: 28rpx;
          color: $font-color-dark;
          font-weight: bold;
          line-height: 1.4;
          margin-bottom: 10rpx;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .attr {
          font-size: 24rpx;
          color: $font-color-light;
          margin-bottom: 10rpx;
        }
        
        .price {
          font-size: 26rpx;
          color: $uni-color-primary;
          margin-top: auto;
        }
      }
      
      .time-tag {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        
        .time {
          font-size: 22rpx;
          color: $font-color-light;
        }
      }
    }
    
    .comment-content {
      padding: 24rpx;
      
      .rating-box {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .rating {
          display: flex;
          margin-right: 20rpx;
          
          .yticon {
            font-size: 36rpx;
            color: #ccc;
            margin-right: 10rpx;
            
            &.active {
              color: #ffb400;
            }
          }
        }
        
        .anonymous-tag {
          background-color: #f2f2f2;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          
          text {
            font-size: 22rpx;
            color: $font-color-light;
          }
        }
      }
      
      .content {
        font-size: 28rpx;
        color: $font-color-dark;
        line-height: 1.5;
        margin-bottom: 20rpx;
      }
      
      .pics {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20rpx;
        
        .pic {
          width: 160rpx;
          height: 160rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
          border-radius: 8rpx;
          background-color: #f5f5f5;
        }
      }
      
      .reply {
        background-color: #f8f8f8;
        padding: 20rpx;
        border-radius: 8rpx;
        margin-bottom: 20rpx;
        
        .label {
          font-size: 26rpx;
          color: $font-color-dark;
          font-weight: bold;
        }
        
        .reply-content {
          font-size: 26rpx;
          color: $font-color-base;
          line-height: 1.5;
        }
        
        .reply-time {
          display: block;
          font-size: 22rpx;
          color: $font-color-light;
          margin-top: 10rpx;
          text-align: right;
        }
      }
      
      .actions {
        display: flex;
        justify-content: flex-end;
        border-top: 1rpx solid #f5f5f5;
        padding-top: 20rpx;
        
        .action-btn {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: $font-color-base;
          padding: 10rpx 20rpx;
          border-radius: 30rpx;
          margin-left: 20rpx;
          background-color: #f5f5f5;
          
          .yticon {
            font-size: 30rpx;
            margin-right: 10rpx;
          }
          
          &:active {
            opacity: 0.7;
          }
        }
      }
    }
  }
</style> 